<template>
  <div class="sku">
    <!-- 遮罩层 -->
    <div class="mask" @click="CloseSku"></div>

    <div class="sku-container">
      <!-- sku头 -->
      <div class="sku-header">
        <!-- sku缩略图 -->
        <div class="sku-thumb-img">
          <van-image :src="datas.pictureComperssPath" />
        </div>
        <!-- 标题 -->
        <div class="sku-title">
          <p class="sku-title-price">{{price | toFixed | rmb}}</p>
          <p class="sku-title-stocknum">剩余:{{datas.amount}}</p>
          <!-- 步进器 -->
          <van-stepper integer v-model="num" />
        </div>
        <van-icon class="close" name="cross" @click="CloseSku" />
      </div>

      <!-- sku身体 -->
      <div class="sku-body">
        <div class="sku-size sku-item">
          <div class="sku-item-title">尺寸：</div>
          <ul>
            <li
              v-for="(item,idx) of datas.type"
              :key="item.id"
              @click="SelectSku(item,idx)"
              :class="currentIndex === idx ? 'sku-active' : null"
            >{{item.name}}</li>
          </ul>
        </div>
        <div class="button-list">
          <van-button
            class="van-button van-button--danger van-button--large"
            @click="addshopCar"
          >加入购物车</van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    datas: {
      type: Object,
      required: true,
      default: new Object()
    },
    price: {
      type: Number,
      required: true,
      default: 0
    }
  },
  data() {
    return {
      skuOptions: {}, //sku选择信息
      //datas: {},
      num: 1, //商品数量
      currentIndex: 0 //默认选中规格
    };
  },
  watch: {
    //监听skuOptions
    skuOptions: {
      handler(newVal) {
        //console.log(newVal)
        if (newVal) {
          this.datas.skuComb.forEach(item => {
            if (item.s1 === newVal.id) {
              this.datas.oriPrice = item.price; //获取sku对应价格
              this.datas.amount = item.stock_num; //获取sku对应库存
              this.datas.selectType = newVal.name; //获取sku对应规格名称
            }
          });
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    // 关闭sku弹窗
    CloseSku() {
      this.$eventBus.$emit("CloseSku", false);
    },
    // 选择商品尺寸
    SelectSku(item, idx) {
      //console.log(item)
      this.skuOptions = item;
      this.currentIndex = idx;
    },
    // 添加到购物车
    addshopCar() {
      // console.log(this.datas.name)  //商品名称
      // console.log(this.datas.pictureComperssPath)  //商品图片
      // console.log(this.datas.selectType)  //商品规格
      // console.log(this.num)  //商品数量

      let goodsItem = {
        id: this.datas.id, //商品id
        name: this.datas.name, //商品名称
        img: this.datas.pictureComperssPath, //商品图片
        sku: this.datas.selectType, //商品规格
        price: this.datas.oriPrice, //商品价格
        num: this.num, //商品数量
        isChecked: true //是否勾选
      };
      //console.log(goodsItem);
      let goodsList = JSON.parse(localStorage.getItem("goodsList"));
      //console.log(goodsList);
      // goodsList为空或goodsList值为[]
      if (goodsList === null || goodsList && goodsList.length === 0) {
        let arr = [];
        arr.push(goodsItem);
        localStorage.setItem("goodsList", JSON.stringify(arr));
        //console.log(arr);
      }
      // goodsList有值,不为[]
      else {
        let arr = [];
        let bool = false;
        goodsList.forEach(item => {
          // 商品id和规格一致时
          if (item.id === goodsItem.id && item.sku === goodsItem.sku) {
            // 累加商品数量
            item.num += goodsItem.num;
            bool = true;
            //console.log(arr);
            //window.location.reload();
          }
          // 商品id和规格不一致
          else {
            // 叠加商品数量
            arr.push(item);
            //console.log(arr);
          }
        });
        arr.push(goodsItem);
        // console.log(bool);
        // console.log(goodsList);
        console.log(arr);
        if (bool) {
          localStorage.setItem("goodsList", JSON.stringify(goodsList));
        } else {
          localStorage.setItem("goodsList", JSON.stringify(arr));
        }
      }
      let list = JSON.parse(localStorage.getItem("goodsList"))
      this.$eventBus.$emit("getgoodsList",list)
      this.$toast.success("添加成功")

      // 关闭sku弹窗
      this.CloseSku()
    }
  },
  created() {
    /*this.$eventBus.$on("getDetailGoodsInfo", res => {
      console.log(res)
      //this.datas = res;
    });*/
    if (this.datas) {
      this.skuOptions = this.datas.type[0];
    }
  }
};
</script>

<style lang="scss">
@import "@/style/details/details.scss";
</style>